<template>
  <tr class="border-b border-neutral-200 dark:border-white/10 last:border-b-0">
    <td class="whitespace-nowrap px-6 py-4 font-medium">
      <div class="image-container">
        <img
          :src="user.picture"
          :alt="user.name"
        />
      </div>
    </td>
    <td class="whitespace-nowrap px-6 py-4 font-medium">
      {{ user.id }}
    </td>
    <td class="whitespace-nowrap px-6 py-4">{{ user.name }}</td>
    <td class="whitespace-nowrap px-6 py-4">
      {{ user.surname }}
    </td>
    <td class="whitespace-nowrap px-6 py-4">{{ user.email }}</td>
    <td class="whitespace-nowrap px-6 py-4">
      {{ user.isActive ? "Активный" : "Не активный" }}
    </td>
    <td class="whitespace-nowrap px-6 py-4 flex gap-2 cursor-pointer">
      <PencilIcon @click="editUser(user.id)" /><ViewIcon
        @click="viewUser(user.id)"
      />
    </td>
  </tr>
</template>

<script setup lang="ts">
  import type { User } from "~/types/user";
  defineProps({
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  });

  const router = useRouter();
  const editUser = (id: string) => {
    router.push(`/${id}?edit`);
  };
  const viewUser = (id: string) => {
    router.push(`/${id}`);
  };
</script>
<style lang="scss">
  .image-container {
    width: 32px;
    height: 32px;
  }
</style>
